<template>
  <div class="container">
    <Breadcrumb :items="['成绩管理', '成绩列表']" />
    <div class="">
      <div class="header">
        <a-button type="primary" @click="releaseVisible = true">录入成绩</a-button>
          <a-modal 
            v-model:visible="releaseVisible" 
            @ok="handleReleaseOK" 
            @cancel="releaseVisible = false"
            :maskStyle="{'opacity':'0.15','background':'#FFFFF','animation':'none'}">
            <template #title>更新</template>
            <div>
              <a-form :model="releaseScore" @finish-submit="handleReleaseOK">
                <a-form-item field="matchTitle" label="赛事名称">
                  <a-input v-model="releaseScore.matchTitle"/>
                </a-form-item>
                <a-form-item field="nickName" label="姓名">
                  <a-input v-model="releaseScore.nickName"/>
                </a-form-item>
                <a-form-item field="matchType" label="赛程">
                  <a-select v-model="releaseScore.matchType" placeholder="请选择" allow-clear>
                    <a-option value="1">积分赛</a-option>
                    <a-option value="2">常规赛</a-option>
                  </a-select>
                </a-form-item>
                <a-form-item field="raceItemName" label="赛项">
                  <a-input v-model="releaseScore.raceItemName" />
                </a-form-item>
                <a-form-item field="scheduleType" label="类型">
                  <a-select v-model="releaseScore.scheduleType" placeholder="请选择" allow-clear>
                    <a-option value="1">初赛</a-option>
                    <a-option value="2">复赛</a-option>
                    <a-option value="3">半决赛</a-option>
                    <a-option value="4">决赛</a-option>
                  </a-select>
                </a-form-item>
                <a-form-item field="raceMethod" label="比赛方式">
                  <a-select v-model="releaseScore.raceMethod" placeholder="请选择" allow-clear>
                    <a-option value="1">五次取平均</a-option>
                    <a-option value="2">全部取平均</a-option>
                  </a-select>
                </a-form-item>
                <a-form-item field="score" label="成绩">
                  <a-input v-model="releaseScore.score" placeholder="请输入成绩" />
                </a-form-item>
              </a-form>
            </div>
          </a-modal>
        <a-range-picker
          style="width: 360px; margin-left: 20px"
          show-time
          v-model="times"
          format="YYYY-MM-DD HH:mm:ss"
          @ok="onTimeRangeSelect"
          @clear="onTimeClear"
        />
      </div>
      <a-table :data="data" stripe="true" :pagination="false">
        <template #columns>
          <a-table-column title="ID" data-index="userMatchScoreId"></a-table-column>
          <a-table-column title="名称" data-index="matchTitle"></a-table-column>
          <a-table-column title="姓名" data-index="nickName"></a-table-column>
          <a-table-column title="邮箱" data-index="email"></a-table-column>
          <a-table-column title="学校" data-index="schoolName"></a-table-column>
          <a-table-column title="赛程" data-index="matchType"></a-table-column>
          <a-table-column title="赛项" data-index="raceItemName"></a-table-column>
          <a-table-column title="类型" data-index="scheduleType"></a-table-column>
          <a-table-column title="方式" data-index="raceMethod"></a-table-column>
          <a-table-column title="成绩" data-index="score"></a-table-column>
          <a-table-column title="排名" data-index="myRank"></a-table-column>
          <a-table-column title="录入时间" data-index="createTime"></a-table-column>
          <a-table-column title="更新时间" data-index="updateTime"></a-table-column>
          <a-table-column title="操作" data-index="operation">
            <template #cell="{ record }">
              <a-space>
                <a-button type="outline" status="success" @click="handleUpdatedRecordFunc(record)">更新</a-button>
                <a-modal 
                  v-model:visible="updatedVisible" 
                  @ok="handleUpdatedOK" 
                  @cancel="updatedVisible = false"
                  :maskStyle="{'opacity':'0.15','background':'#FFFFF','animation':'none'}">
                  <template #title>更新</template>
                  <div>
                    <a-form :model="updatedScore" @finish-submit="handleUpdatedOK">
                      <a-form-item field="matchTitle" label="赛事名称" disabled>
                        <a-input v-model="updatedScore.matchTitle"/>
                      </a-form-item>
                      <a-form-item field="nickName" label="姓名" disabled>
                        <a-input v-model="updatedScore.nickName"/>
                      </a-form-item>
                      <a-form-item field="matchType" label="赛程" disabled>
                        <a-select v-model="updatedScore.matchType" placeholder="请选择" allow-clear>
                          <a-option value="1">积分赛</a-option>
                          <a-option value="2">常规赛</a-option>
                        </a-select>
                      </a-form-item>
                      <a-form-item field="raceItemName" label="赛项" disabled>
                        <a-input v-model="updatedScore.raceItemName" />
                      </a-form-item>
                      <a-form-item field="scheduleType" label="类型">
                        <a-select v-model="updatedScore.scheduleType" placeholder="请选择" allow-clear>
                          <a-option value="1">初赛</a-option>
                          <a-option value="2">复赛</a-option>
                          <a-option value="3">半决赛</a-option>
                          <a-option value="4">决赛</a-option>
                        </a-select>
                      </a-form-item>
                      <a-form-item field="score" label="成绩">
                        <a-input v-model="updatedScore.score" placeholder="请输入成绩" />
                      </a-form-item>
                    </a-form>
                  </div>
                </a-modal>
                <a-button type="outline" status="danger">删除</a-button>
              </a-space>
            </template>
          </a-table-column>
        </template>
      </a-table>
      <div style="width: 100%;margin: 10px auto;">
        <a-pagination 
          @change="pageChange" 
          :total="total" 
          :current="curPage" 
          :page-size="pageSize" 
          simple/>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
  import { onMounted, ref } from 'vue';
  import axios from 'axios';

  interface ItemLabel {
    value: number;
    label: string;
  }

  export default {
    setup() {
      const data = ref([] as any)
      const scheduleTypeLabels: ItemLabel[] = [
        { value: 1, label: '初赛' },
        { value: 2, label: '复赛' },
        { value: 3, label: '半决赛'},
        { value: 4, label: '决赛' }
      ];
      const curPage = ref(1)
      const pageSize = ref(8)
      const total = ref(1)
      const dateField = ref({
        createTime:'create_time'
      })
      const times = ref()
      
      const reqTableListData = () => {
        data.value = []
        axios.get(`/match/score/list`, {
          params: {
            curPage: curPage.value,
            pageSize: pageSize.value,
            dateField: times.value ? dateField.value.createTime : '',
            startDate: times.value ? times.value[0] : '',
            endDate: times.value ? times.value[1] : ''
          }
        }).then((res1:any) => {
          console.log(res1);
          curPage.value = res1.current
          pageSize.value = res1.size
          total.value = res1.total
          res1.records.forEach((item:{ matchType:any; raceMethod:any; scheduleType:any}) => {
            item.matchType = item.matchType === 1 ? '积分赛' : '常规赛'
            item.raceMethod = item.raceMethod === 1 ? '五次取平均' : '全部取平均'
            item.scheduleType = scheduleTypeLabels.find(label => label.value === item.scheduleType)?.label;
            data.value.push(item);
          })
        })
      }

      onMounted(async()=>{
        await reqTableListData()
      });

      const pageChange = (current:any) => {
          curPage.value = current
          reqTableListData()
      }
      const onTimeRangeSelect = () => {
        console.log(times.value)
        reqTableListData()
      }
      const onTimeClear = () => {
        reqTableListData()
      }

  
      const updatedScore = ref({
        matchTitle:'',
        nickName:'',
        matchType:'',
        raceItemName:'',
        matchScheduleId: '',
        raceItemId: '',
        scheduleType:'',
        score: '',
        userMatchScoreId: '',
      })
      const updatedVisible = ref(false)
      const handleUpdatedRecordFunc = (record:any) => {
        console.log(record);
        updatedVisible.value = true
        updatedScore.value.matchTitle = record.matchTitle
        updatedScore.value.nickName = record.nickName
        updatedScore.value.matchType = record.matchType === "积分赛" ? '1' : '2'
        updatedScore.value.raceItemName = record.raceItemName
        updatedScore.value.raceItemId = record.raceItemId
        updatedScore.value.matchScheduleId = record.matchScheduleId
        updatedScore.value.userMatchScoreId = record.userMatchScoreId
        updatedScore.value.score = record.score
        if (record.scheduleType === '初赛') {
          updatedScore.value.scheduleType = `${1}`
        } else if (record.scheduleType === '复赛') {
          updatedScore.value.scheduleType = `${2}`
        } else if (record.scheduleType === '半决赛') {
          updatedScore.value.scheduleType = `${3}`
        } else if (record.scheduleType === '决赛') {
          updatedScore.value.scheduleType = `${4}`
        }
        
      }
      const handleUpdatedOK = () => {
        updatedVisible.value = false
        axios.put(`/match/score/update`, {
          "matchScheduleId": updatedScore.value.matchScheduleId,
          "raceItemId": updatedScore.value.raceItemId,
          "scheduleType": updatedScore.value.scheduleType,
          "score": updatedScore.value.score,
          "userMatchScoreId": updatedScore.value.userMatchScoreId
        }).then(res => {
          console.log(res)
          updatedVisible.value = false
          reqTableListData()
        })
      }

      const releaseVisible = ref(false)
      const releaseScore = ref({
        matchTitle:'',
        nickName:'',
        matchType:'',
        raceItemName:'',
        scheduleType:'',
        raceMethod: '',
        score: '',
      })
      const releaseScheduleType = () => {
        if (releaseScore.value.scheduleType === '初赛') {
          releaseScore.value.scheduleType = `${1}`
        } else if (releaseScore.value.scheduleType === '复赛') {
          releaseScore.value.scheduleType = `${2}`
        } else if (releaseScore.value.scheduleType === '半决赛') {
          releaseScore.value.scheduleType = `${3}`
        } else if (releaseScore.value.scheduleType === '决赛') {
          releaseScore.value.scheduleType = `${4}`
        }
      }
      const handleReleaseOK = () => {
        releaseVisible.value = false
        axios.put(`/match/score/create`,{
          "matchTitle": releaseScore.value.matchTitle,
          "matchType": releaseScore.value.matchType === "积分赛" ? `${1}` : `${2}`,
          "nickName": releaseScore.value.nickName,
          "raceItemName": releaseScore.value.raceItemName,
          "scheduleType": releaseScore.value.scheduleType,
          "raceMethod": releaseScore.value.raceMethod === "五次取平均" ? `${1}` : `${2}`,
          "score": releaseScore.value.score
        }).then(res => {
          console.log(res)
          releaseVisible.value = false
          reqTableListData()
        })
      }

      return {
        data,scheduleTypeLabels,reqTableListData,
        curPage,pageSize,total,pageChange,
        dateField,times,
        onTimeRangeSelect,onTimeClear,
        updatedScore,updatedVisible,handleUpdatedRecordFunc,handleUpdatedOK,
        releaseVisible,releaseScore,handleReleaseOK,releaseScheduleType
      };
    },
  };
</script>

<style scoped lang="less">
  .container {
    padding: 0 20px 20px 20px;
  }

  .header {
    display: flex;
    padding: 20px;
    align-items: center;
    margin-bottom: 10px;
    background-color: #fff;
  }
</style>

<style lang="less" scoped>
  .mobile {
    .content {
      display: block;
      &-left {
        margin-right: 0;
        margin-bottom: 16px;
      }
      &-right {
        width: 100%;
      }
    }
  }
</style>
